<template>
    <div>
        <div style="width: 60%;margin: 30px auto;border-radius: 20px;">
            <div
                style="height: 100px;padding: 0 10px;display: flex;align-items: center;border-radius: 25px;background-color: white;">
                <img :src="sellerData.avatar" style="height: 80px;width: 80px;border-radius: 50%;" alt="">
                <div style="width: 220px;margin: 0 30px 0 15px;font-size: 20px;font-weight: bold;">
                    <div style="height: 30px;line-height: 30px;">{{ sellerData.name }}</div>
                    <img src="@/assets/img/icon.png" style="height: 50px;margin-top: 5px;margin-left: -10px;" alt="">
                </div>
                <div style="width: 150px;height: 100px;padding: 20px;">
                    <div style="font-size: 16px;height: 30px;line-height: 30px;color: #7F7F7FFF;">店铺电话</div>
                    <div style="font-size: 16px;height: 30px;line-height: 30px;">{{ sellerData.phone }}</div>
                </div>
                <div style="width: 150px;height: 100px;padding: 20px;">
                    <div style="font-size: 16px;height: 30px;line-height: 30px;color: #7F7F7FFF;">店铺邮箱</div>
                    <div style="font-size: 16px;height: 30px;line-height: 30px;">{{ sellerData.email }}</div>
                </div>
                <div style="flex: 1;height: 100px;padding: 20px;">
                    <div
                        style="height: 60px;line-height: 30px;font-size: 16px;color: #000000FF;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                        店铺介绍：{{ sellerData.description }}
                    </div>
                </div>
            </div>
            <div style="border-radius: 20px;padding: 0 20px;background-color: white;margin-top: 20px;">
                <div style="font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">本店所有商品（{{goodsData.length}}）件
                </div>
                <div style="margin-top: 20px;">
                    <el-row>
                        <el-col :span="5" style="margin-bottom: 20px;" v-for="item in goodsData">
                            <img @click="navGo('/GoodsInfo?id=' + item.id)" :src="item.img"
                                style="width: 100%;height: 180px;border-radius: 10px;border: #cccccc 1px solid;" alt="">
                            <div
                                style="margin-top: 10px;font-weight: bold;font-size: 20px;width: 180px;color: #000000FF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                                {{ item.name }}</div>
                            <div style="margin-top: 5px;font-size: 24px;color:#FF5000FF">￥{{ item.price }}/{{ item.unit
                                }}
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { selectGoods, selectOne } from "../../api/index";

export default {
    data() {
        return {
            sellerId: this.$route.query.id,
            goodsData: [],
            typeData: {},
            sellerData: {}
        }
    },
    created() {
        selectOne("seller", this.sellerId).then(res => {
            if (res.code === 200) {
                this.sellerData = res.data;
                selectGoods("goods", this.sellerData.id).then(res => {
                    if (res.code === 200) {
                        this.goodsData = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                })
            } else {
                this.$message.error(res.message)
            }
        })
    },
    methods: {
        navGo(url) {
            this.$router.push(url);
        }
    }
}

</script>

<style>
body {
    background-color: #efebeb
}

a:hover {
    color: red;
}

a {
    text-decoration: none;
    color: #666666
}
</style>